<template>
  <a-card :bordered="false" style="background-color:#f0f2f5;" class="ssss">
    <a-row justify="space-around" align="middle">
      <a-col :xl="18" :lg="17" :md="16" :sm="24" style="margin-right:10px;">
        <a-row :span="1">
          <div style="height:40px;background-color:#fff;">
            <a-form @keyup.enter.native="searchQuery(addForm)" style="height:40px">
              <a-row :gutter="24" style="height:40px">
                <a-col :xl="6" :lg="7" :md="8" :sm="24" style="height:40px">
                  <a-form-item label="平台名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                    <me-dict-select-tag v-model="addForm.id" dictCode="pt" placeholder="请选择平台名称"/>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left;overflow: hidden;" >
                    <a-button type="primary" @click="searchQuery(addForm)" icon="search">查询</a-button>
                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-row>
        <a-row :span="12">
          <div class="height101" >
            <iframe src="http://192.168.1.22/fscada/runview.aspx?filename=fsmap-N209H11B-ZNJZ" width="100%" height="100%" scrolling="no"></iframe>
          </div>
        </a-row>
        <a-row :span="8" style="margin-top:10px;">
          <div style="background:linear-gradient(180deg, #FFFFFF 0%, #EAF7FD 100%);font-weight: bold;color: #5A5F62;height:46px;line-height:46px;margin:0px 5px;padding-left:20px;">综合分析曲线</div>
          <div class="height1201" id="myChart"></div>
        </a-row>
      </a-col>
      <a-col :xl="5" :lg="6" :md="7" :sm="24">
        <a-row :span="12">
          <a-list bordered class="height100" style="background: #FFFFFF;" >
            <a-list-item style="background: linear-gradient(180deg, #FFFFFF 0%, #EAF7FD 100%);font-weight: bold;color: #5A5F62;">平台信息</a-list-item>
           <a-list-item class="listh">
            <span v-if="newdata.a!==undefined && newdata.a!==''" style="width:100%;" @click="getpt">平台名称：<span class="aaa">{{newdata.a}}</span></span>
            <span v-else style="width:100%;">平台名称：<span class="aaa">暂无数据</span></span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.b!==undefined && newdata.b!==''" style="width:100%;">加注状态：<span class="aaa">{{newdata.b}}</span></span>
            <span v-else style="width:100%;">加注状态：<span class="aaa" >暂无数据</span></span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.c!==undefined && newdata.c!==''" style="width:100%;">停泵时间：<span class="aaa">{{newdata.c}}分钟</span></span>
            <span v-else style="width:100%;">停泵时间：<span class="aaa">暂无数据</span></span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.d!==undefined && newdata.d!==''" style="width:100%;">泵排量：<span class="aaa">{{newdata.d}}L</span></span>
            <span v-else style="width:100%;">泵排量：<span class="aaa">暂无数据</span></span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.e!==undefined && newdata.e!==''" style="width:100%;">加入药剂量：<span class="aaa">{{newdata.e}}L</span></span>
            <span v-else style="width:100%;">加入药剂量：<span class="aaa">暂无数据</span></span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.f!==undefined && newdata.f!==''" style="width:100%;">加注水量：<span class="aaa">{{newdata.f}}L</span></span>
            <span v-else style="width:100%;">加注水量：<span class="aaa">暂无数据</span></span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.j!==undefined && newdata.j!==''" style="width:100%;">状态开始时间：<span class="aaa">{{newdata.j}}</span></span>
            <span v-else style="width:100%;">状态开始时间：<span class="aaa">暂无数据</span></span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.r!==undefined && newdata.r!==''" style="width:100%;">配液时间：<span class="aaa">{{newdata.r}}</span></span>
            <span v-else style="width:100%;">配液时间：<span class="aaa">暂无数据</span></span>
          </a-list-item>
        </a-list>
        </a-row>
        <a-row :span="12" style="margin-top:10px;">
          <a-list bordered item-layout="vertical" size="large" class="height100" style="background: #FFFFFF;">
            <a-list-item style="background: linear-gradient(180deg, #FFFFFF 0%, #EAF7FD 100%);font-weight: bold;color: #5A5F62;">单井信息</a-list-item>
            <a-list-item style="padding:0px 5px;height:50px">
              <div style="float:left;width:30%;line-height:50px" class="text1">名称</div>
              <div style="float:left;width:40%;line-height:50px" class="text1">当前状态</div>
              <div style="float:left;width:30%;line-height:50px" class="text1">加注量(L/d)</div>
            </a-list-item>
            <a-list-item style="padding:0px 5px;height:50px" class="listh" @click="getWell">
              <div style="float:left;width:30%;line-height:50px" class="text1">5号井</div>
              <div style="float:left;width:40%;line-height:50px" class="text2">停止</div>
              <div style="float:left;width:30%;line-height:50px" class="text1">6</div>
            </a-list-item>
            <a-list-item style="padding:0px 5px;height:50px" class="listh">
              <div style="float:left;width:30%;line-height:50px" class="text1">6号井</div>
              <div style="float:left;width:40%;line-height:50px" class="text2">停止</div>
              <div style="float:left;width:30%;line-height:50px" class="text1">6</div>
            </a-list-item>
            <a-list-item style="padding:0px 5px;height:50px" class="listh">
              <div style="float:left;width:30%;line-height:50px" class="text1">7号井</div>
              <div style="float:left;width:40%;line-height:50px" class="text2">停止</div>
              <div style="float:left;width:30%;line-height:50px" class="text1">5</div>
            </a-list-item>
            <a-list-item style="padding:0px 5px;height:50px" class="listh">
              <div style="float:left;width:30%;line-height:50px" class="text1">8号井</div>
              <div style="float:left;width:40%;line-height:50px" class="text2">停止</div>
              <div style="float:left;width:30%;line-height:50px" class="text1">6</div>
            </a-list-item>
            <a-list-item style="padding:0px 5px;height:50px" class="listh">
              <div style="float:left;width:30%;line-height:50px" class="text1">10号井</div>
              <div style="float:left;width:40%;line-height:50px" class="text2">停止</div>
              <div style="float:left;width:30%;line-height:50px" class="text1">4</div>
            </a-list-item>
            <a-list-item style="padding:0px 5px;height:50px" class="listh">
              <div style="float:left;width:30%;line-height:50px" class="text1">11号井</div>
              <div style="float:left;width:40%;line-height:50px" class="text2">停止</div>
              <div style="float:left;width:30%;line-height:50px" class="text1">6</div>
            </a-list-item>
          </a-list>
        </a-row>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
// import myline from './myline1.vue'
import { myGetAction,getAction,getActions,searchList } from '@/api/manage'
import resize from './resize'
require('echarts/theme/macarons') 

export default {
  // components:{
  //   myline
  // },
  mixins:[resize],
  data() {
    return {
      addForm:{id:null},
      level:[],
      fillingSpeed:[],
      fillingMotorFreq:[],
      fillingMotorStatus:[],
      agitatorMotorStatus:[],
      fillingPressure:[],
      newdata:{},
      chart:null,
      labelCol: {
        // xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        // xs: { span: 24 },
        sm: { span: 16 },
      },
      chart:null,
      jiaz:[36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,36,50,36,36,36,36],
      jiaz1:[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,10,6,6,6,6]
    }
  },
  created(){
    console.log(this.$route);
    console.log(this.$route.query.ppjzsbId)
    if(this.$route.query.ppjzsbId==undefined){
      this.addForm.id='1'
    }else{
      this.addForm.id='1'
    }
    this.searchQuery()
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(()=>{
        this.initChart(this.jiaz)
      },10)
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getWell(){
      console.log("dwqdq");
      this.initChart(this.jiaz1)
    },
    getpt(){
      this.initChart(this.jiaz)
    },
    searchQuery(){
      console.log('1212124141')
      console.log(this.addForm.id);
      getAction("/ppgyPpjzztsj/ppgyPpjzztsj/queryBySId", this.addForm.id).then(res => {
        console.log(res)
        if (res.result.length===0){
          // console.log('暂无数据')
          // this.$message.info('暂无数据')
          // this.newdata={}
        }else{
          this.newdata =res.result
        }
      })
      this.newdata={a:"长宁H7-2",b:'停止',c:"70",d:"6",e:"12",f:"30",j:'2021-12-14 19:19:06',r:"2021-12-14 19:19:06"}
    },
    searchReset(){
      console.log('qwfiuaiu')
      this.addForm.id='1'
      this.searchQuery()
    },
    initChart(y3){
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      this.chart.setOption({
        // title: { 
        //   text: '综合分析曲线',
        //   textStyle: {
        //     backgroundColor:linear-gradient(180deg, #FFFFFF 0%, #EAF7FD 100%);
        //   }
        // },
        tooltip: {},
        grid: {
          // left: 30,
          // right: 30,
          // bottom: 20,
          // top: 30,
          // containLabel: true
        },
        // grid: {
        //   x: 55,
        //   y: 80
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
           formatter: function (params, ticket, callback) {
              console.log(params);
              var showHtm="";
              // for(var i=0;i<params.length;i++){
              //     //x轴名称
              //     var name = params[i][1];
              //     //名称
              //     var text = params[i][3];
              //     //值
              //     var value = params[i][2];
              //     showHtm+= text+ '--' + name + ' 得分：' + value+'<br>'
              // }
              showHtm+=params[0].axisValue+'<br>'
              showHtm+=params[0].seriesName+"："+params[0].data+'方<br>'
              showHtm+=params[1].seriesName+"："+params[1].data+'万方<br>'
              showHtm+=params[2].seriesName+"："+params[2].data+'L<br>'
              return showHtm;
          }
        },
        legend: {
          top:10,
          right:30,
          textStyle:{
            color: '#000'
          }
        },
        xAxis: {
          data: ['2021-11-16', '2021-11-17', '2021-11-18', '2021-11-19', '2021-11-20', '2021-11-21', '2021-11-22', '2021-11-23', '2021-11-24', '2021-11-25', '2021-11-26', '2021-11-27', '2021-11-28', '2021-11-29', '2021-11-30', '2021-12-01', '2021-12-02', '2021-12-03', '2021-12-04', '2021-12-05', '2021-12-06', '2021-12-07', '2021-12-08', '2021-12-09', '2021-12-10', '2021-12-11', '2021-12-12', '2021-12-13', '2021-12-14', '2021-12-15', '2021-12-16'],
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            // rotate:30,
            textStyle: {
              color: '#000'
            }
          },
          axisLine: {            // 坐标轴线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle控制线条样式
              color: '#1E427A',
              width: 2,
              type: 'solid'
            }
          }
        },
        // xAxis: {
        //     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        // },
        // yAxis: {},
        // series: [{
        //     name: '销量',
        //     type: 'line',
        //     data: [5, 20, 36, 10, 10, 20]
        // }]
        yAxis: [
          {
            name: '产水量（方）',
            type: 'value',
            // nameTextStyle:{
            //   color:'#fff'
            // },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              }
            },
            axisLine: {            // 坐标轴线
              show: true,        // 默认显示，属性show控制显示与否
              lineStyle: {       // 属性lineStyle控制线条样式
                color: '#1E427A',
                width: 2,
                type: 'solid'
              }
            }
          },
          {
            name: '产气量（万方）',
            type: 'value',
            // nameTextStyle:{
            //   color:'#000'
            // },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              }
            },
            axisLine: {            // 坐标轴线
              show: true,        // 默认显示，属性show控制显示与否
              lineStyle: {       // 属性lineStyle控制线条样式
                color: '#1E427A',
                width: 2,
                type: 'solid'
              }
            }
          },
          {
            name: '加注量（L）',
            type: 'value',
            offset:-80,
            // nameTextStyle:{
            //   color:'#000'
            // },
            // splitLine: {
            //   show: false
            // },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              }
            },
            axisLine: {            // 坐标轴线
              show: true,        // 默认显示，属性show控制显示与否
              lineStyle: {       // 属性lineStyle控制线条样式
                color: '#1E427A',
                width: 2,
                type: 'solid'
              }
            }
          }
        ],
        series: [
          {
            name: '产水量',
            type: 'line',
            smooth: true,
            data: [563.4, 512.3, 524.7, 516.2, 521.1, 529.5, 547.8, 559.4, 533.5, 561.9, 542.4, 550.4, 533.5, 540.5, 502.5, 520, 464.8, 447, 440.93, 448.91, 495.3, 508.2, 422.3, 424.9, 471.7, 490.3, 737.8, 645.6, 617.37, 559.1, 559.3],
            color:'#0075FF'
          },
          {
            name: '产气量',
            type: 'line',
            smooth: true,
            data: [315.76, 309.11, 312.09, 312.39, 325.08, 335.75, 334.61, 344.18, 335.3, 349.12, 341.32, 340.01, 314.8, 318.79, 324.92, 331.06, 322.32, 330.02, 331.49, 322.23, 334.73, 316.97, 313.19, 315.27, 327.39, 349.16, 400.54, 404.12, 397.41, 397.23, 398.45],
            yAxisIndex: 1,
            color:'#EFA638'
          },
          {
            name: '加注量',
            type: 'line',
            smooth: true,
            data: y3,
            yAxisIndex: 2,
            color:'#BD99FF'
          }
        ]
      });
    }
  }
}
</script>


<style lang="less">
.listh:hover{
  background-color: #f0f2f5;
}
.height100{
  height:500px;
  /* line-height: 100px; */
  overflow: hidden;

}
.height101{
  height:600px;
  /* line-height: 100px; */
  overflow: hidden;

}
.jzimg{
  background-size: cover;
  height: 100%;
  width: 100%;
  padding:0px 5px;
}
.height120{
  height: 300px;
  /* padding:0px 5px; */
  /* overflow-y: scroll; */
}
.height1201{
  height: 320px;
  margin:0px 5px;
  width: calc(100% - 10px);
  background-color: #fff;
  /* overflow-y: scroll; */
}
.height-130{
  height: 450px;
  overflow-y: scroll;
}
.aaa{
  float:right;
  font-weight: bold;
  color: #5A5F62;
  padding-right:20px;
}
.text1{
  text-align: center;
}
.text2{
  text-align: center;
  font-weight: bold;
}
.ssss{
  .ant-card-body{
    padding-top:5px;
  }
}
</style>